<template>
    <view class="bg-white min-h-screen">
        <!-- 导航栏 -->
        <view class="px-4 py-3 border-b border-slate-100">
            <view class="flex justify-between items-center">
                <button class="p-2" @tap="goBack">
                    <text class="iconfont icon-arrow-left text-slate-800"></text>
                </button>
                <text class="text-lg font-medium text-slate-800">项目详情</text>
                <button class="p-2" @tap="showOptions">
                    <text class="iconfont icon-more text-slate-800"></text>
                </button>
            </view>
        </view>

        <!-- 项目头部 -->
        <view class="px-5 pt-6 pb-4">
            <view class="flex items-start">
                <view class="flex-1">
                    <text class="text-xl font-bold text-slate-800">{{ project.title }}</text>
                    <view class="flex items-center mt-1">
                        <text class="text-xs px-2 py-half rounded-full" :class="getStatusClass(project.status)">
                            {{ getStatusName(project.status) }}
                        </text>
                        <view class="w-1 h-1 rounded-full bg-slate-300 mx-2"></view>
                        <text class="text-xs text-slate-500">截止: {{ project.deadline }}</text>
                    </view>
                </view>
                <button class="ml-2 px-3 py-1 rounded-lg bg-indigo-500 flex items-center" @tap="editProject">
                    <text class="text-white text-xs">编辑</text>
                </button>
            </view>

            <view class="mt-4" v-if="project.description">
                <text class="text-sm text-slate-600">{{ project.description }}</text>
            </view>
        </view>

        <!-- 进度条 -->
        <view class="px-5 py-4 bg-slate-50">
            <view class="flex justify-between items-center mb-2">
                <text class="text-sm font-medium text-slate-700">项目进度</text>
                <text class="text-sm font-medium text-indigo-600">{{ project.progress }}%</text>
            </view>
            <view class="h-2 bg-slate-200 rounded-full overflow-hidden">
                <view class="h-full rounded-full bg-indigo-500" :style="{ width: `${project.progress}%` }"></view>
            </view>
        </view>

        <!-- 项目信息 -->
        <view class="px-5 py-6">
            <view class="grid grid-cols-2 gap-4">
                <view class="bg-slate-50 rounded-lg p-4">
                    <text class="text-xs text-slate-500 block mb-1">开始日期</text>
                    <text class="text-sm font-medium text-slate-800">{{ project.startDate }}</text>
                </view>
                <view class="bg-slate-50 rounded-lg p-4">
                    <text class="text-xs text-slate-500 block mb-1">截止日期</text>
                    <text class="text-sm font-medium text-slate-800">{{ project.deadline }}</text>
                </view>
                <view class="bg-slate-50 rounded-lg p-4">
                    <text class="text-xs text-slate-500 block mb-1">优先级</text>
                    <text class="text-sm font-medium" :class="getPriorityTextClass(project.priority)">
                        {{ getPriorityName(project.priority) }}
                    </text>
                </view>
                <view class="bg-slate-50 rounded-lg p-4">
                    <text class="text-xs text-slate-500 block mb-1">标签</text>
                    <view class="flex flex-wrap gap-1 mt-1">
                        <text v-for="(tag, index) in project.tags" :key="index"
                            class="text-xs px-2 py-half rounded-full bg-indigo-100 text-indigo-600">
                            {{ tag }}
                        </text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

// 获取路由参数
const projectId = ref('');
onMounted(() => {
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const options = currentPage.$page?.options;
    if (options && options.id) {
        projectId.value = options.id;
        loadProjectData(options.id);
    }
});

// 项目数据类型
interface Task {
    title: string;
    completed: boolean;
    dueDate?: string;
    priority?: 'low' | 'medium' | 'high';
}

interface Project {
    id: string;
    title: string;
    description: string;
    status: 'planning' | 'in_progress' | 'completed' | 'on_hold';
    progress: number;
    startDate: string;
    deadline: string;
    priority: 'low' | 'medium' | 'high';
    tags: string[];
    tasks: Task[];
    notes?: string;
}

// 项目数据
const project = ref<Project>({
    id: '',
    title: '移动应用开发项目',
    description: '开发一款高端生活管理助手应用，包含习惯追踪、目标管理和项目规划功能。',
    status: 'in_progress',
    progress: 45,
    startDate: '2023-06-01',
    deadline: '2023-09-30',
    priority: 'high',
    tags: ['移动应用', 'UI设计', '前端开发'],
    tasks: [
        {
            title: '完成需求分析文档',
            completed: true,
            dueDate: '2023-06-10'
        },
        {
            title: '设计UI界面原型',
            completed: true,
            dueDate: '2023-06-25',
            priority: 'high'
        },
        {
            title: '开发首页模块',
            completed: true,
            dueDate: '2023-07-15'
        },
        {
            title: '开发习惯追踪功能',
            completed: false,
            dueDate: '2023-08-05',
            priority: 'medium'
        },
        {
            title: '开发目标管理功能',
            completed: false,
            dueDate: '2023-08-25',
            priority: 'medium'
        },
        {
            title: '进行用户测试',
            completed: false,
            dueDate: '2023-09-15',
            priority: 'high'
        }
    ],
    notes: '这个项目需要重点关注用户体验，确保界面简洁易用。同时需要优化性能，保证应用运行流畅。'
});

// 加载项目数据
const loadProjectData = (id: string) => {
    // 这里应该从数据库或API获取数据
    // 为了演示，我们使用模拟数据
    console.log(`加载项目数据: ${id}`);
    // 实际应用中这里会有API调用
};

// 获取状态样式类
const getStatusClass = (status: string) => {
    switch (status) {
        case 'planning': return 'bg-slate-100 text-slate-600';
        case 'in_progress': return 'bg-blue-100 text-blue-600';
        case 'completed': return 'bg-green-100 text-green-600';
        case 'on_hold': return 'bg-yellow-100 text-yellow-600';
        default: return 'bg-slate-100 text-slate-600';
    }
};

// 获取状态名称
const getStatusName = (status: string) => {
    switch (status) {
        case 'planning': return '规划中';
        case 'in_progress': return '进行中';
        case 'completed': return '已完成';
        case 'on_hold': return '已暂停';
        default: return '规划中';
    }
};

// 获取优先级名称
const getPriorityName = (priority: string) => {
    switch (priority) {
        case 'high': return '高';
        case 'medium': return '中';
        case 'low': return '低';
        default: return '中';
    }
};

// 获取优先级文本样式
const getPriorityTextClass = (priority: string) => {
    switch (priority) {
        case 'high': return 'text-red-500';
        case 'medium': return 'text-orange-500';
        case 'low': return 'text-blue-500';
        default: return 'text-slate-500';
    }
};

// 获取任务优先级样式类
const getTaskPriorityClass = (priority: string) => {
    switch (priority) {
        case 'high': return 'bg-red-100 text-red-600';
        case 'medium': return 'bg-orange-100 text-orange-600';
        case 'low': return 'bg-blue-100 text-blue-600';
        default: return 'bg-slate-100 text-slate-600';
    }
};

// 获取任务优先级文本
const getTaskPriorityText = (priority: string) => {
    switch (priority) {
        case 'high': return '高';
        case 'medium': return '中';
        case 'low': return '低';
        default: return '中';
    }
};

// 切换任务完成状态
const toggleTask = (index: number) => {
    project.value.tasks[index].completed = !project.value.tasks[index].completed;

    // 更新项目进度
    updateProjectProgress();

    // 显示提示
    uni.showToast({
        title: project.value.tasks[index].completed ? '已完成任务' : '已取消完成',
        icon: 'none'
    });
};

// 更新项目进度
const updateProjectProgress = () => {
    const totalTasks = project.value.tasks.length;
    if (totalTasks === 0) return;

    const completedTasks = project.value.tasks.filter(t => t.completed).length;
    project.value.progress = Math.round((completedTasks / totalTasks) * 100);
};

// 添加任务
const addTask = () => {
    uni.navigateTo({
        url: `/subPages/project/task?projectId=${project.value.id}`
    });
};

// 编辑任务
const editTask = (index: number) => {
    uni.showActionSheet({
        itemList: ['编辑', '删除'],
        success: (res) => {
            if (res.tapIndex === 0) {
                // 编辑
                uni.navigateTo({
                    url: `/subPages/project/task?projectId=${project.value.id}&taskIndex=${index}`
                });
            } else if (res.tapIndex === 1) {
                // 删除
                uni.showModal({
                    title: '删除任务',
                    content: '确定要删除这个任务吗？',
                    success: (modalRes) => {
                        if (modalRes.confirm) {
                            project.value.tasks.splice(index, 1);

                            // 更新项目进度
                            updateProjectProgress();
                        }
                    }
                });
            }
        }
    });
};

// 编辑项目
const editProject = () => {
    uni.navigateTo({
        url: `/subPages/project/add?id=${project.value.id}`
    });
};

// 编辑笔记
const editNotes = () => {
    uni.showModal({
        title: '编辑项目笔记',
        editable: true,
        content: project.value.notes || '',
        success: (res) => {
            if (res.confirm) {
                project.value.notes = res.content;
            }
        }
    });
};

// 更新进度
const updateProgress = () => {
    uni.showModal({
        title: '更新进度',
        content: '请选择更新方式',
        showCancel: true,
        cancelText: '手动输入',
        confirmText: '任务计算',
        success: (res) => {
            if (res.confirm) {
                // 根据任务计算
                updateProjectProgress();
                uni.showToast({
                    title: '进度已更新',
                    icon: 'success'
                });
            } else {
                // 手动输入
                uni.showModal({
                    title: '手动设置进度',
                    content: '请输入完成百分比 (0-100)',
                    editable: true,
                    placeholderText: '例如: 75',
                    success: (modalRes) => {
                        if (modalRes.confirm && modalRes.content) {
                            const progress = parseInt(modalRes.content);
                            if (!isNaN(progress) && progress >= 0 && progress <= 100) {
                                project.value.progress = progress;
                                uni.showToast({
                                    title: '进度已更新',
                                    icon: 'success'
                                });
                            } else {
                                uni.showToast({
                                    title: '请输入0-100的数字',
                                    icon: 'none'
                                });
                            }
                        }
                    }
                });
            }
        }
    });
};

// 分享项目
const shareProject = () => {
    uni.showActionSheet({
        itemList: ['生成分享图', '复制链接', '发送给好友'],
        success: (res) => {
            uni.showToast({
                title: '分享功能开发中',
                icon: 'none'
            });
        }
    });
};

// 显示选项菜单
const showOptions = () => {
    uni.showActionSheet({
        itemList: ['编辑项目', '删除项目'],
        success: (res) => {
            if (res.tapIndex === 0) {
                // 编辑项目
                editProject();
            } else if (res.tapIndex === 1) {
                // 删除项目
                uni.showModal({
                    title: '删除项目',
                    content: '确定要删除这个项目吗？所有相关数据将被永久删除。',
                    confirmColor: '#ef4444',
                    success: (res) => {
                        if (res.confirm) {
                            // 执行删除操作
                            uni.showToast({
                                title: '删除成功',
                                icon: 'success',
                                success: () => {
                                    setTimeout(() => {
                                        goBack();
                                    }, 1500);
                                }
                            });
                        }
                    }
                });
            }
        }
    });
};

// 返回上一页
const goBack = () => {
    uni.navigateBack();
};
</script>

<style>
/* 添加额外的图标 */
.icon-arrow-left:before {
    content: '\e628';
}

.icon-more:before {
    content: '\e639';
}

.icon-plus:before {
    content: '\e636';
}

.icon-edit:before {
    content: '\e63b';
}

.icon-refresh:before {
    content: '\e63d';
}

.icon-share:before {
    content: '\e63e';
}
</style>